<template>
	<view class="homestay-main">
		<scroll-view refresher-background="#fff" scroll-y="true" refresher-enabled="true"
			:refresher-triggered="triggered" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			show-scrollbar="false" class="camping-scroll-view" :scroll-top="scrollTop" @scroll="handleScroll"
			enable-back-to-top="true">
			<view class="food-content-main">
				<view class="left-content" v-if="leftShowList.length > 0">
					<view class="food-post-per-left" v-for="item in leftShowList" :key="item.aid"
						@click="clickFoodPost(item)">
						<view class="img-or-video">
							<image :style="{ height: item.imageHeight + 'px' }" :src="item.url" mode="aspectFill"
								class="img-food" v-if="!item.isVedio"></image>
							<!-- <video class="foods-video" controls preload="metadata" crossorigin="anonymous"
								autoplay="false" :src="item.url" v-if="item.isVedio" :poster="item.vedioCover">
							</video> -->
							<!-- 由于uniapp组件video层级太高，所以用自定义的视频组件 -->
							<!-- <DomVideoPlayer :src="item.url" :autoplay="false" muted :isLoading="true" v-else>
							</DomVideoPlayer> -->
							<image :style="{ height: item.imageHeight + 'px' }" :src="item.vedioCover" mode="aspectFill"
								class="img-food" v-else></image>
						</view>
						<view class="mask-info">
							<view class="info-one">
								<view class="info-avatar">
									<image :src="item.authorAvatar" mode="aspectFill" class="author-avatar-image">
									</image>
								</view>
								<view class="author-username">
									{{item.authorUserName.length > 10 ? item.authorUserName.substring(0,10) : item.authorUserName}}
								</view>
								<!-- <view class="jy-vip">
									<view class="jy-text">
										疆屿
									</view>
									<view class="jy-icon">
										<image src="@/static/icons/vip.png" mode="aspectFill"></image>
									</view>
								</view> -->
							</view>
							<view class="info-two">
								{{item.title}}
							</view>
							<view class="info-like">
								<view class="info-like-icon" @click.stop="likeOrDisLike(item)">
									<uni-icons type="heart-filled" size="22" color="#fff"
										v-if="!item.isLike"></uni-icons>
									<uni-icons type="heart-filled" size="22" color="#66596b" v-else></uni-icons>
								</view>
								<view class="like-num-text">
									<text class="likes-num">{{item.likesNum}}</text>
								</view>
							</view>
						</view>
						<!-- <view class="post-title">
							{{item.title}}
						</view>
						<view class="author-avatar-likes">
							<view class="author-avatar-username">
								<view class="author-avatar">
									<image :src="item.authorAvatar" class="author-avatar-image"></image>
								</view>
								<view class="author-username">
									{{item.authorUserName}}
								</view>
							</view>
							<view class="post-likes">
								<view class="likes-icon">
									<uni-icons type="heart"></uni-icons>
								</view>
								<view class="likes-num">
									{{item.likesNum}}
								</view>
							</view>
						</view> -->
					</view>
				</view>
				<view class="right-content" v-if="rightShowList.length > 0">
					<view class="food-post-per-right" v-for="item in rightShowList" :key="item.aid"
						@click="clickFoodPost(item)">
						<view class="img-or-video">
							<image :style="{ height: item.imageHeight + 'px' }" :src="item.url" mode="aspectFill"
								class="img-food" v-if="!item.isVedio"></image>
							<!-- <video class="foods-video" controls preload="metadata" crossorigin="anonymous"
								:src="item.url" v-if="item.isVedio" :poster="item.vedioCover">
							</video> -->
							<!-- 由于uniapp组件video层级太高，所以用自定义的视频组件 -->
							<!-- <DomVideoPlayer class="camping-video" :src="item.url" :autoplay="false" muted :isLoading="true" v-else>
							</DomVideoPlayer> -->
							<image :style="{ height: item.imageHeight + 'px' }" :src="item.vedioCover" mode="aspectFill"
								class="img-food" v-else></image>
						</view>
						<view class="mask-info">
							<view class="info-one">
								<view class="info-avatar">
									<image :src="item.authorAvatar" mode="aspectFill" class="author-avatar-image">
									</image>
								</view>
								<view class="author-username">
									{{item.authorUserName.length > 10 ? item.authorUserName.substring(0,10) : item.authorUserName}}
								</view>
								<!-- <view class="jy-vip">
									<view class="jy-text">
										疆屿
									</view>
									<view class="jy-icon">
										<image src="@/static/icons/vip.png" mode="aspectFill"></image>
									</view>
								</view> -->
							</view>
							<view class="info-two">
								{{item.title}}
							</view>
							<view class="info-like">
								<view class="info-like-icon" @click.stop="likeOrDisLike(item)">
									<uni-icons type="heart-filled" size="22" color="#fff"
										v-if="!item.isLike"></uni-icons>
									<uni-icons type="heart-filled" size="22" color="#66596b" v-else></uni-icons>
								</view>
								<view class="like-num-text">
									<text class="likes-num">{{item.likesNum}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="return-top" v-show="showReturnTop" @click="goToTop">
			<uni-icons type="arrow-up" color="#fff"></uni-icons>
		</view>
	</view>
</template>

<script>
	import mitter from '@/common/mitt/eventBus.js'
	import {
		getCampingDynamicList,
		thumbsUpNote
	} from '@/request/yufans.js'
	export default {
		data() {
			return {
				triggered: false, // 下拉刷新是否显示
				campingList: [{
						aid: 1,
						url: 'https://img2.baidu.com/it/u=2415166668,631117445&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667', // 这个是美食帖子的展示图URL地址，或者是视频URL
						title: '民宿时光',
						authorAvatar: 'https://img1.baidu.com/it/u=3200425930,2413475553&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800', // 发布美食帖子的作者头像
						authorUserName: '吃遍全中国', // 作者用户名
						likesNum: 23, // 点赞数量
						isVedio: false, // 是图片还是视频（图片false,视频true）
						vedioCover: '' // 视频封面（如果该条帖子是图片没有视频，那么这一项就为‘’）
					},
					{
						aid: 2,
						url: 'https://vdept3.bdstatic.com/mda-qg95h1rd1c89mhii/cae_h264/1720594512316802503/mda-qg95h1rd1c89mhii.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1732361012-0-0-745175cb540b9459f366502b3d675459&bcevod_channel=searchbox_feed&pd=1&cr=0&cd=0&pt=3&logid=1412448182&vid=7221232594810620466&klogid=1412448182&abtest=', // 这个是美食帖子的展示图URL地址，或者是视频URL
						title: '远离尘嚣觅静处，特色民宿映霞光，温馨雅韵伴君眠，此中风情韵悠长。',
						authorAvatar: 'https://img1.baidu.com/it/u=3200425930,2413475553&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800', // 发布美食帖子的作者头像
						authorUserName: '吃遍全中国', // 作者用户名
						likesNum: 876, // 点赞数量
						isVedio: true, // 是图片还是视频（图片false,视频true）
						vedioCover: 'https://img2.baidu.com/it/u=2006456137,1236876165&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422' // 视频封面（如果该条帖子是图片没有视频，那么这一项就为‘’）
					},
					{
						aid: 3,
						url: 'blob:https://www.bilibili.com/fae0bbf1-ef96-476c-a894-dcc21dc90bf9', // 这个是美食帖子的展示图URL地址，或者是视频URL
						title: '田园民宿蔬果繁，鸡犬相闻似桃源，质朴纯真乡土味，慢调生活返自然',
						authorAvatar: 'https://img1.baidu.com/it/u=3200425930,2413475553&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800', // 发布美食帖子的作者头像
						authorUserName: '吃遍全中国', // 作者用户名
						likesNum: 2324, // 点赞数量
						isVedio: true, // 是图片还是视频（图片false,视频true）
						vedioCover: 'https://img0.baidu.com/it/u=1867831670,1712761126&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=666' // 视频封面（如果该条帖子是图片没有视频，那么这一项就为‘’）
					},
					{
						aid: 4,
						url: 'https://img1.baidu.com/it/u=412969208,69317590&fm=253&fmt=auto&app=120&f=JPEG?w=1199&h=800', // 这个是美食帖子的展示图URL地址，或者是视频URL
						title: '花田民宿花影重，彩蝶翩跹舞春风，香风拂榻梦幽远，浪漫之旅韵无穷',
						authorAvatar: 'https://img1.baidu.com/it/u=3200425930,2413475553&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800', // 发布美食帖子的作者头像
						authorUserName: '吃遍全中国', // 作者用户名
						likesNum: 0, // 点赞数量
						isVedio: false, // 是图片还是视频（图片false,视频true）
						vedioCover: '' // 视频封面（如果该条帖子是图片没有视频，那么这一项就为‘’）
					},
					{
						aid: 5,
						url: 'https://vdept3.bdstatic.com/mda-qdp3rgrpqwxtu2vj/cae_h264/1713936456405759493/mda-qdp3rgrpqwxtu2vj.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1732351421-0-0-0486a81869e79f4945743ff0355959d7&bcevod_channel=searchbox_feed&pd=1&cr=0&cd=0&pt=3&logid=2621269633&vid=16630308857428401296&klogid=2621269633&abtest=', // 这个是美食帖子的展示图URL地址，或者是视频URL
						title: '亲近自然',
						authorAvatar: 'https://img1.baidu.com/it/u=3200425930,2413475553&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800', // 发布美食帖子的作者头像
						authorUserName: '吃遍全中国', // 作者用户名
						likesNum: 133, // 点赞数量
						isVedio: true, // 是图片还是视频（图片false,视频true）
						vedioCover: 'https://img0.baidu.com/it/u=1513024244,2558729636&fm=253&fmt=auto&app=138&f=JPEG?w=781&h=500' // 视频封面（如果该条帖子是图片没有视频，那么这一项就为‘’）
					},
					{
						aid: 6,
						url: 'https://vdept3.bdstatic.com/mda-qb0jmz9d2teq3hjn/cae_h264/1706963926661905411/mda-qb0jmz9d2teq3hjn.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1732361121-0-0-edf5bcd5792f90dce8a53a929355e744&bcevod_channel=searchbox_feed&pd=1&cr=0&cd=0&pt=3&logid=1521204490&vid=14565689644960774466&klogid=1521204490&abtest=', // 这个是美食帖子的展示图URL地址，或者是视频URL
						title: '环境真好！',
						authorAvatar: 'https://img1.baidu.com/it/u=3200425930,2413475553&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800', // 发布美食帖子的作者头像
						authorUserName: '吃遍全中国', // 作者用户名
						likesNum: 3245, // 点赞数量
						isVedio: true, // 是图片还是视频（图片false,视频true）
						vedioCover: 'https://img1.baidu.com/it/u=1108945907,2107600279&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800' // 视频封面（如果该条帖子是图片没有视频，那么这一项就为‘’）
					},
					{
						aid: 7,
						url: 'https://img2.baidu.com/it/u=2441754893,3973800298&fm=253&fmt=auto&app=120&f=JPEG?w=888&h=500', // 这个是美食帖子的展示图URL地址，或者是视频URL
						title: '都市民宿闹中幽，便捷时尚韵独留，繁华盛景窗前揽，别样旅居韵长流',
						authorAvatar: 'https://img1.baidu.com/it/u=3200425930,2413475553&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800', // 发布美食帖子的作者头像
						authorUserName: '吃遍全中国', // 作者用户名
						likesNum: 12, // 点赞数量
						isVedio: false, // 是图片还是视频（图片false,视频true）
						vedioCover: '' // 视频封面（如果该条帖子是图片没有视频，那么这一项就为‘’）
					},
					{
						aid: 8,
						url: 'https://img2.baidu.com/it/u=2441754893,3973800298&fm=253&fmt=auto&app=120&f=JPEG?w=888&h=500', // 这个是美食帖子的展示图URL地址，或者是视频URL
						title: 'nice',
						authorAvatar: 'https://img1.baidu.com/it/u=3200425930,2413475553&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800', // 发布美食帖子的作者头像
						authorUserName: '吃遍全中国', // 作者用户名
						likesNum: 1234, // 点赞数量
						isVedio: false, // 是图片还是视频（图片false,视频true）
						vedioCover: '' // 视频封面（如果该条帖子是图片没有视频，那么这一项就为‘’）
					},
					{
						aid: 9,
						url: 'https://img2.baidu.com/it/u=465426639,1583877409&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500', // 这个是美食帖子的展示图URL地址，或者是视频URL
						title: '这个地方值得你来！',
						authorAvatar: 'https://img1.baidu.com/it/u=3200425930,2413475553&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800', // 发布美食帖子的作者头像
						authorUserName: '吃遍全中国', // 作者用户名
						likesNum: 334, // 点赞数量
						isVedio: false, // 是图片还是视频（图片false,视频true）
						vedioCover: '' // 视频封面（如果该条帖子是图片没有视频，那么这一项就为‘’）
					},
				], // 美食帖子list
				leftShowList: [], // 左边展示的列表
				rightShowList: [], // 右边展示的列表
				showReturnTop: false, // 添加这个变量控制返回顶部图标显示
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				travelMode: '境内游',
			}
		},
		mounted() {

			// 调用封装后的获取数据函数
			this.fetchCampingData();

			// 添加travelMode事件监听，只在这里添加一次，避免重复添加
			mitter.on('travelMode', (data) => {
				// console.log(data);
				this.travelMode = data;
				// 调用封装的函数获取最新数据
				this.fetchCampingData();
			})
			mitter.on('startRefresh', (data) => {
				if(data){
					// 调用封装的函数获取最新数据
					this.fetchCampingData();
				}
			})
		},
		beforeDestroy() {
			mitter.off('travelMode');
			mitter.off('startRefresh');
		},
		onHide() {
			mitter.off('travelMode');
			mitter.off('startRefresh');
		},
		methods: {

			// 点击爱心，点赞或者取消点赞
			likeOrDisLike(item) {
				const that = this;
				console.log(item);
				const param = {
					noteAid: item.aid
				}
				thumbsUpNote(param).then(res => {
					if (res.data.code === 10000) {
						// that.fetchCampingData();
						if (item.isLike) {
							item.likesNum = item.likesNum === 0 ? 0 : item.likesNum - 1;
						} else {
							item.likesNum += 1;
						}
						item.isLike = !item.isLike;
					} else {
						uni.showToast({
							title: '请稍后再试...',
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: '请稍后再试...',
						icon: 'none'
					})
				})
			},


			// 封装获取数据的核心逻辑
			fetchCampingData() {
				this.campingList = [];
				this.leftShowList = [];
				this.rightShowList = [];
				const params = {
					travelMode: this.travelMode,
				}
				getCampingDynamicList(params).then(res => {
					// console.log(res);
					this.campingList = res.data.data;
					this.sliderFoodsPosts();
				}).catch(err => {
					uni.showToast({
						title: '获取数据失败！',
						icon: 'error'
					})
					console.log(err);
				})
			},

			// 将美食帖子列表分为左右两部分列表（奇数在左边，偶数在右边）
			sliderFoodsPosts() {
				this.campingList.forEach((post, index) => {
					if (post.title.length > 12) {
						post.title = post.title.substring(0, 12) + '...'
					}
					if (index % 2 !== 0) {
						this.rightShowList.push(post);
					} else {
						this.leftShowList.push(post);
					}
				});
			},

			// 点击其中一个帖子
			clickFoodPost(item) {
				uni.navigateTo({
					// 使用查询字符串形式添加参数，这里假设目标页面可以通过这种方式接收并解析参数
					url: `/pages/tabBar/component/topBar/travel/noteDetailPage?aid=${item.aid}`
				})
			},


			// 自定义下拉刷新控件被下拉
			onPulling(e) {
				if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
				this.triggered = true;
			},

			// 自定义下拉刷新被触发
			onRefresh() {
				setTimeout(() => {
					this.triggered = false;
					// 获取露营信息
					this.fetchCampingData();
				}, 1000);
			},

			// 添加handleScroll方法来处理滚动事件
			handleScroll(event) {
				this.old.scrollTop = event.detail.scrollTop
				// console.log("在滚动")
				const scrollTop = event.detail.scrollTop; // 使用event.detail.scrollTop获取滚动距离
				// console.log(scrollTop);
				if (scrollTop > 500) {
					// 当滚动距离大于500时显示返回顶部图标
					this.showReturnTop = true;
				} else {
					this.showReturnTop = false;
				}
			},

			// 点击返回顶部
			goToTop() {
				// console.log("点击了");
				this.scrollTop = this.old.scrollTop;
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.homestay-main {
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		width: 96%;
		margin-left: auto;
		margin-right: auto;
	}


	.homestay-main scroll-view {
		height: calc(100vh - 440rpx);
	}

	.food-content-main {
		margin-top: 30rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 100rpx;
	}

	.left-content {
		width: 49%;
	}

	.right-content {
		width: 49%;
	}

	.food-post-per-left {
		width: 100%;
		// background-color: #3ED598;
		border-radius: 25px;
		margin-bottom: 15rpx;
		position: relative;
	}

	.food-post-per-right {
		width: 100%;
		border-radius: 25px;
		margin-bottom: 15rpx;
		position: relative;
	}

	.img-or-video {
		width: 100%;
		height: 100%;
		border-radius: 25px;
	}

	.img-food {
		height: 450rpx;
		width: 100%;
		border-radius: 25px;
	}


	.foods-video {
		border-radius: 5px;
		height: 450rpx;
		width: 100%;
	}

	.author-avatar-likes {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.author-avatar-username {
		display: flex;
	}

	.author-avatar-image {
		width: 20px;
		height: 20px;
		border-radius: 50%;
	}

	.post-title {
		padding: 20rpx;
		font-size: 32rpx;
		line-height: 1.5;
	}

	.post-likes {
		display: flex;
	}

	.likes-num {
		font-size: 20rpx;
		display: flex;
		align-items: center;
		color: #fff;
	}

	.author-username {
		color: #fff;
		font-size: 12px;
		margin-left: 10rpx;
	}

	.return-top {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background-color: #66596b;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 40rpx;
		bottom: 100rpx;
		z-index: 900;
	}

	.mask-info {
		// height: 60px;
		width: calc(100% - 20px);
		// width: 100%;
		position: absolute;
		bottom: 5px;
		left: 0;
		background-color: rgba(0, 0, 0, 0.2);
		// background-color: #66596b;
		border-radius: 0 0 25px 25px;
		padding: 10px;
		padding-bottom: 5px;
	}

	.jy-icon {
		margin-left: 2px;

		image {
			width: 12px;
			height: 12px;
		}
	}

	.info-one {
		display: flex;
		align-items: center;
	}

	.jy-text {
		color: #000;
		font-size: 10px;
	}

	.jy-vip {
		margin-left: 10px;
		display: flex;
		width: 40px;
		height: 10px;
		background-color: #3ED598;
		border-radius: 10px;
		padding: 5px;
		align-items: center;
		justify-content: center;
	}

	.info-two {
		color: #fff;
		font-size: 10px;
	}

	.info-like {
		display: flex;
		width: 100%;
		justify-content: flex-end;
	}

	.like-num-text {
		margin-left: 3px;
		display: flex;
		align-items: center;
		font-size: 10px;
	}
</style>